<template>
  <div id="orderCheck">
    <div class="list-box">
      <!-- 进度条 -->
      <el-steps :active="active">
        <el-step title="我的购物车"></el-step>
        <el-step title="确认订单信息"></el-step>
        <el-step title="订单提交成功"></el-step>
      </el-steps>
      <!-- 收货人 -->
      <div class="order-receive">
        <h2 class="order-title">选择收货人</h2>
        <div class="order-receive-box">
          <div class="order-receive-cont-outer">
            <ul class="order-receive-cont">
              <li class="order-receive-item" v-for="(value,index) in addresses" :key="index" @click="setAddress(value)">
                <p class="title">
                  <span class="name">{{value.name}}</span>
                  (收)
                </p>
                <p class="info info-city">{{value.province}} {{value.city}} {{value.local}}</p>
                <p class="info info-road">{{value.remark}}</p>
                <p class="info info-tel">{{value.tel}}</p>
              </li>
            </ul>
          </div>
        </div>
        <div></div>
      </div>
      <!-- 商品信息 -->
      <div class="order-goods-import">
        <h2 class="order-title">商品信息</h2>
        <div class="order-goods-thead">
          <div class="td-goods fl">商品</div>
          <div class="td-price fl">单价</div>
          <div class="td-num fl">数量</div>
          <div class="td-count fl">金额小计(元)</div>
        </div>
        <div class="order-goods-cont" v-for="(value,index) in goods" :key="index">
          <div class="order-goods-tbody">
            <div class="order-goods-tr">
              <div class="td-goods fl">
                <div class="goods-images">
                  <img :src="value.imgs.split(',')[0]" alt />
                </div>
                <div class="goods-title">
                  <br><br>
                  <p>{{value.product_name}}</p>
                </div>
              </div>
              <div class="td-price fl">
                <p><br><br>￥{{value.shop_price}}</p>
              </div>
              <div class="td-num fl"><br><br>1</div>
       
              <div class="td-count fl"><br><br>￥{{value.shop_price}}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 备注 -->
      <div class="order-goods-bottom overflow">
        <div class="order-goods-remark">
          <strong class="name">备注</strong>
          <div class="cont">
            <el-input type="textarea" :rows="5" placeholder="选填，可以告诉卖家你对订单的特殊要求" v-model="textarea"></el-input>
          </div>
        </div>
        <div class="order-goods-gather">
          <div class="gather-tr">
            <!-- <div class="gather-th">{{count}}&nbsp;件商品，总商品金额：{{total}}</div>
            <div class="gather-td">
              ￥
              <span></span>
            </div> -->
          </div>
          <!-- <div class="gather-tr">
            <div class="gather-th">
              <span>运费：</span>
            </div>
            <div class="gather-td">
              ￥
              <span></span>
            </div>
          </div> -->
        </div>
      </div>
      <!-- 确定订单 -->
      <div class="order-goods-tfoot-outer">
        <div class="order-goods-tfoot">
          {{count}}&nbsp;件商品
          <div class="pay-amout">
            本单应付总额：
            <span class="money">{{total}}</span>
          </div>
          <div class="submit">
            <el-button style="width: 100%;height: 100%;" type="primary" @click="commit">提交订单</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 2,
      addresses: [
      ],
      total:null,
      count:null,
      address :null,
      textarea:null,
      dialogFormVisible: false,
      goods: [
      ],
    };
  },
  mounted(){
    this.goods =eval(this.$route.query.items)
    this.total = this.goods.map(p=>{
            if(p.checked){
              return parseFloat(p.shop_price)
            }else{
              return 0;
            }
          }).reduce((total, num) => total + num);
    this.count =  this.goods.map(p=>{
            if(p.checked){
              return 1
            }else{
              return 0;
            }
          }).reduce((total, num) => total + num);
    this.dialogVisible = true
    this.axios.get("user/delivers").then((resp)=>{
      if(resp.code == 0){
          this.addresses = resp.data
      }
      if(resp.code == 201){
        this.$router.push("/login")
      }
    })
  },
  methods: {
    commit() {
      let ids =[]
      if(this.address==null){
         this.$message.success("请点击收货地址！")
      }
      this.goods.forEach(p=>ids.push(p.id))
      this.axios.post('/order/add',{
        ids:ids,
        address:this.address.id,
        remark:this.textarea
      }).then(resp=>{
        if(resp.code ==0){
            this.$router.push({
              name:"Payment",
              query:resp.data
            })
        }else{
           this.$message.error(resp.msg)
        }
      })
    },
    setAddress(value){
      this.$message.success('已选择'+value.name+"为收货地址！")
      this.address = value
    }
  }
};
</script>

<style scoped>
#orderCheck .list-box {
  margin: 0 auto;
  width: 1080px;
}

/* 进度条 */
.el-steps--horizontal {
  padding: 2% 5% 0;
}

/* 收货人 */
.order-title {
  font-size: 16px;
  line-height: 16px;
  font-weight: bold;
  padding-top: 20px;
  padding-bottom: 30px;
  border-top: 1px dotted #ddd;
  margin-top: 20px;
}
.order-receive .order-title {
  border-top: 0;
  margin-top: 10px;
}

.order-receive-box {
  overflow: hidden;
}
.order-receive-cont-outer {
  overflow: hidden;
  height: 150px;
}
.order-receive-cont {
  overflow: hidden;
  margin-left: -24px;
  margin-top: -24px;
}
.order-receive-item {
  box-sizing: border-box;
  position: relative;
  float: left;
  width: 316px;
  height: 150px;
  padding: 20px 20px 0 20px;
  border: 1px solid #ddd;
  margin-left: 24px;
  margin-top: 24px;
  cursor: pointer;
}
.order-receive-item:hover {
  border: 1px dashed #0076a4;
}
.order-receive-item:hover .operate {
  display: block;
}
.order-receive-item .title {
  height: 16px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 16px;
  font-weight: bold;
}
.order-receive-item .title .name {
  float: left;
  max-width: 85px;
  height: 16px;
}
.order-receive-item .info {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-wrap: normal;
}
.order-receive-item .info {
  height: 22px;
  font-size: 12px;
  line-height: 22px;
}
.order-receive-item .info-city {
  width: 140px;
}

/* 编辑删除 */
.order-receive-item .operate {
  display: none;
  margin-top: 5px;
}
.cn {
  cursor: auto;
}
.operate el-link {
  cursor: pointer;
  color: #29a3d6;
}
.operate el-link:hover {
  text-decoration: underline #29a3d6;
}

.order-receive-new {
  width: 116px;
  height: 45px;
  margin-top: 15px;
  font-size: 12px;
  line-height: 29px;
  text-align: center;
}

/* 商品信息 */
.order-goods-import {
  position: relative;
}
.order-goods-thead {
  height: 44px;
  padding-left: 15px;
  line-height: 44px;
  background-color: #f3f3f3;
}
.order-goods-import .td-goods {
  width: 500px;
  padding-left: 3px;
  margin-right: 40px;
}
.order-goods-thead .td-goods {
  text-indent: 73px;
}
.order-goods-import .td-price {
  overflow: hidden;
  width: 130px;
}
.order-goods-thead .td-price {
  text-indent: 8px;
}
.order-goods-import .td-num {
  overflow: hidden;
  width: 130px;
  padding-right: 18px;
}
.order-goods-thead .td-num {
  text-align: center;
}
.order-goods-import .td-count {
  overflow: hidden;
  width: 180px;
}
.order-goods-thead .td-count {
  text-indent: 50px;
}
.order-goods-cont {
  position: relative;
  padding: 0 14px;
  border: 1px solid #ddd;
  border-top: 0;
}
.order-goods-tbody {
  padding-bottom: 30px;
  border-top: 1px dotted #ddd;
}
.order-goods-shop {
  height: 12px;
  padding-left: 3px;
  padding-top: 30px;
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 12px;
}
.order-goods-tr {
  line-height: 20px;
  height: 83px;
  padding-top: 5px;
}
.order-goods-tr .td-goods .goods-images {
  float: left;
  margin-top: 3px;
  margin-right: 20px;
  width: 80px;
  height: 80px;
}
.order-goods-tr .td-goods img {
  width: 80px;
  height: 80px;
}
.order-goods-tr .td-goods .goods-title {
  float: left;
  width: 336px;
}
.order-goods-tr .td-num {
  text-align: center;
}
.order-goods-import .order-goods-tr .td-count {
  font-weight: bold;
}
.order-goods-tr .td-count {
  overflow: hidden;
  width: 115px;
  font-size: 14px;
  text-align: right;
  color: #409eff;
}

/* 备注 */
.order-goods-bottom {
  padding: 20px 30px;
  margin-top: 20px;
  background-color: #f3f3f3;
}
.order-goods-remark {
  float: left;
  width: 480px;
}
.order-goods-remark .name {
  float: left;
  width: 45px;
  font-weight: normal;
  line-height: 32px;
}
.order-goods-remark .cont {
  float: left;
  width: 435px;
}
.order-goods-gather {
  float: right;
  width: 505px;
}
.gather-tr {
  height: 32px;
  line-height: 32px;
}
.gather-th {
  position: relative;
  float: left;
  width: 325px;
  font-size: 12px;
  text-align: right;
}
.gather-td {
  float: left;
  overflow: hidden;
  width: 180px;
  font-size: 14px;
  text-align: right;
}

/* 确定订单 */
.order-goods-tfoot-outer {
  margin-top: 25px;
  height: 119px;
}
.order-goods-tfoot {
  text-align: right;
}
.order-goods-tfoot .pay-amout {
  font-size: 16px;
  line-height: 26px;
}
.order-goods-tfoot .pay-amout .money {
  font-size: 20px;
  font-weight: bold;
  margin-left: 5px;
  color: #29a3d6;
}

.order-goods-tfoot .submit {
  display: inline-block;
  width: 340px;
  height: 48px;
  margin-top: 15px;
}
</style>